<script setup lang="js">
import { onMounted, reactive } from 'vue';
import axios from 'axios';

const config = reactive({
  header: ['图书名', '销量'],
  data: [],
  columnWidths: [250, 150],  // 根据图书名长度调整
  align: ['left', 'center'],
  scrollSpeed: 50,  // 设置更快的滚动速度
});

// 获取图书数据
function getData() {
  axios.get('/book-api/queryAllBookPopularityRank')  // 更新为新的API接口
      .then((response) => {
        // 格式化返回的数据
        config.data = response.data.data.map(item => ({
          name: item.name,        // 图书名
          value1: item.value,     // 销量
        }));
      })
      .catch((error) => {
        console.error('Failed to fetch data:', error.message);
      });
}

onMounted(() => {
  getData();
});
</script>


<template>
  <div class="scroll-board-container">
    <div class="header">
      <h2>热门图书推荐</h2>  <!-- 更新标题 -->
      <p>展示最受欢迎的图书和其销量，帮助分析推荐图书</p>  <!-- 更新描述 -->
    </div>
    <div class="board-wrapper">
      <dv-scroll-board :config="config"/>
    </div>
  </div>
</template>


<style lang="css" scoped>
.scroll-board-container {
  background-color: #100C2A;
  color: #ffffff;
  width: 100%;
  height: 500px;
  max-width: 1200px;
  margin: 20px auto 40px;  /* 上下增加间距 */
  padding: 10px,auto,10px;
  box-sizing: border-box;
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 添加阴影 */
}

.header {
  text-align: center;
  margin-bottom: 20px,

}

.header h2 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: bold;
}

.header p {
  margin: 5px 0 0;
  font-size: 1rem;
  color: #b0b0b0;
}

.board-wrapper {
  overflow: hidden;
  border: 1px solid #444444; /* 边框颜色 */
  border-radius: 8px; /* 内部边框圆角 */
  background-color: #1C1C3A; /* 表格背景色 */
  padding: 10px;
  height: 400px;
}

/* dv-scroll-board 内部样式优化 */
.dv-scroll-board {
  font-size: 14px;
  line-height: 1.5;
}

.dv-scroll-board .dv-scroll-board-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid #333333; /* 行分隔线 */
}

.dv-scroll-board .dv-scroll-board-row:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.05); /* 隔行变色 */
}

.dv-scroll-board .dv-scroll-board-row:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 鼠标悬停效果 */
}
</style>
